<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>如果有一个对象中多个属性需要转换getter/setter如何处理</title>
    <style></style>
  </head>
  <body>
    <div id="app">hello</div>
    <script>
      //模拟 Vue 中的data选项
      let data = {
        msg: "Hello Word",
        count: 5,
      };
      // 模拟 Vue 的实例
      let vm = {};
      proxyData(data);
      function proxyData(data) {
        //遍历data中的所有属性
        Object.keys(data).forEach((key) => {
          //把data中的属性,转换成vm的setter/getter
          Object.defineProperty(vm, key, {
            //可枚举
            enumerable: true,
            //可配置(可以使用delete删除，可以通过defineProperty 重新定义)
            configurable: true,
            get() {
              console.log("get", key, data[key]);
              return data[key];
            },
            set(newValue) {
              console.log("set", key, newValue);
              if (newValue === data[key]) {
                return;
              }
              data[key] = newValue;
              //数据更改，更新DOM的值
              document.querySelector("#app").textContent = data[key];
            },
          });
        });
      }
      //测试
      vm.msg = "Hello World";
      console.log(vm.msg);
    </script>
  </body>
</html>
